<template>
  <div class="mainzzj1" v-if="visible">
    <!--<p>{{val}}</p>  自定义属性传值-->
    <!--<p>{{msg1}}</p>   数据模型里面的数据）-->
    <!--<slot></slot>     无名插槽传值-->
    <!--<slot name="apple"></slot>   有名插槽传值-->
    <!--<h2>{{$attrs.a}}</h2>-->
    <!--<p>{{msg}}</p>-->
    <h1 @click="changeVisible">11111$emit</h1>
    <p @click="changeParent">222$parent</p>
  </div>
</template>

<script>
export default {
  name: 'zzj1',
  data() {
    return {
      msg: '点击我删除',
    };
  },
  methods: {
    changeVisible() {
      this.$emit('update:visible', false);
      // this.$emit('updateVisible', false);
    },
    changeParent() {
      this.$parent.val = 'hhahhahahaahahah';
      // this.$emit('test','abcd');
      // $emit()  是主动触发事件的方法
      // 第一个参数是 触发的事件名
      // 第二个参数是 事件触发时执行的函数传递实际参数
      // $emit() 是绑定在VUE原型上的
      // vue原型上的方法或者属性都会在前面加上$ 以便识别它是vue自带的方法  这是规范
    },
  },
  props: ['msg1', 'visible', 'val'], //  接收父组件传的值
};
</script>

<style scoped>
.mainzzj1{
  height: 200px;
  background: coral;
  color: #fff;
}
p{
  color: #fff;
  text-align: center;
}
</style>
